<template>
  <div class="xuanze">
    <div class="shang">
      <span class="iconfont icon-fanhui"></span>
      <p>活动配餐</p>
      <div class="tou">
        <span class="iconfont icon-dian"></span>
        <div class="zhongjian"></div>
        <span class="iconfont icon-shuangyuanquan"></span>
      </div>
    </div>
    <div class="zhong">
      <p>价格区间</p>
      <div class="zhongshang">
        <div class="zhshs" :style="{width:this.lastPos}"></div>
        <div
          class="zhsha"
          @touchstart="dianji"
          @touchmove="dianjis"
          @touchend="dianjia"
          :style="{left:this.lastPos}"
        >
          <p>￥{{this.yuan}}</p>
        </div>
      </div>
      <p>用餐人数</p>
      <div class="zhongshang">
        <div class="zhshs" :style="{width:this.lastPosa}"></div>
        <div
          class="zhsha"
          @touchstart="dianjin"
          @touchmove="dianjisn"
          @touchend="dianjian"
          :style="{left:this.lastPosa}"
        >
          <p>￥{{this.yuana}}</p>
        </div>
      </div>
      <p>用餐餐段</p>
      <ul class="zhongzhong">
        <li v-for="(item,index) in arr" :key="index">
          <label :for="item.ming" :class="active===item.name?'reds':''" @click="dian(item.name)"></label>
          <p :id="item.ming">{{item.name}}</p>
        </li>
      </ul>
      <p>用餐标准</p>
      <ul class="zhongxia">
        <li v-for="(item,index) in str" :key="index">
          <label :for="item.ming" :class="tive===item.name?'reds':''" @click="dianhun(item.name)"></label>
          <p :id="item.ming">{{item.name}}</p>
        </li>
      </ul>
      <p>用餐周期</p>
      <ul class="zhongshijian">
        <div class="shijianleft" @click="xuanshi('kaishi')">
          <p>{{kaishi}}</p>
          <span class="iconfont icon-riqi"></span>
        </div>
        <div class="shijianright" @click="xuanshi('jieshu')">
          <p>{{jieshu}}</p>
          <span class="iconfont icon-riqi"></span>
        </div>
      </ul>
      <div class="wanshan">
        <button @click="wanshan">完善需求</button>
      </div>
    </div>
    <div class="jieshu" v-if="this.flag">
      <div class="jieshuxia">
        <div class="jieshuxiashang">
          <h1 @click="qushi('quxiao')">取消</h1>
          <h1 @click="qushi('queding')">确定</h1>
        </div>
        <ul class="jieshuxiaxia" v-if="this.shijian==='kaishi'">
          <li
            v-for="(item,index) in kaishishijian"
            :key="index"
            :class="kaishi===item.name?'xiaxia':''"
            @click="xuan('kaishi',item.name)"
          >{{item.name}}</li>
        </ul>
        <ul class="jieshuxiaxia" v-if="this.shijian==='jieshu'">
          <li
            v-for="(item,index) in kaishishijian"
            :key="index"
            :class="jieshu===item.name?'xiaxia':''"
            @click="xuan('jieshu',item.name)"
          >{{item.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "XUAN",
  data() {
    return {
      arr: [
        {
          name: "早餐早点",
          ming: "zaocan"
        },
        {
          name: "午餐午点",
          ming: "zhongcan"
        },
        {
          name: "晚餐晚点",
          ming: "wancan"
        },
        {
          name: "夜宵加餐",
          ming: "xiaoye"
        }
      ],
      str: [
        {
          name: "一荤三素",
          ming: "yihun"
        },
        {
          name: "二荤二素",
          ming: "erhun"
        },
        {
          name: "三荤一素",
          ming: "sanhun"
        }
      ],
      kaishishijian: [
        {
          name: "2021-08-11"
        },
        {
          name: "2021-08-12"
        },
        {
          name: "2021-08-13"
        },
        {
          name: "2021-08-14"
        },
        {
          name: "2021-08-15"
        },
        {
          name: "2021-08-16"
        },
        {
          name: "2021-08-17"
        }
      ],
      shijian: "",
      active: "早餐早点",
      tive: "一荤三素",
      lastPos: "0px",
      lastPosX: null,
      curPosX: null,
      yuan: 0,
      lastPosa: "0px",
      lastPosaX: null,
      curPosaX: null,
      yuana: 0,
      kaishi: "开始时间",
      jieshu: "结束时间",
      flag: false
    };
  },
  methods: {
    dianji(e) {
      this.lastPosX = e.targetTouches[0].clientX;
    },
    dianjis(e) {
      this.curPosX = e.targetTouches[0].clientX;
    },
    dianjia(e) {
      let diff = this.curPosX - this.lastPosX;
      let last = Number(this.lastPos.slice(0, this.lastPos.indexOf("p")));
      let pos = last + diff;
      if (pos <= 0) {
        this.lastPos = "0px";
        this.yuan = 0;
      } else if (pos >= 320) {
        this.lastPos = "320px";
        this.yuan = 30;
      } else {
        this.lastPos = pos + "px";
        this.yuan = parseInt(pos / 10);
      }
    },
    dianjin(e) {
      this.lastPosaX = e.targetTouches[0].clientX;
    },
    dianjisn(e) {
      this.curPosaX = e.targetTouches[0].clientX;
    },
    dianjian(e) {
      let diff = this.curPosaX - this.lastPosaX;
      let last = Number(this.lastPosa.slice(0, this.lastPosa.indexOf("p")));
      let pos = last + diff;
      if (pos <= 0) {
        this.lastPosa = "0px";
        this.yuana = 0;
      } else if (pos >= 320) {
        this.lastPosa = "320px";
        this.yuana = 320;
      } else {
        this.lastPosa = pos + "px";
        this.yuana = parseInt(pos);
      }
    },
    dian(index) {
      this.active = index;
    },
    dianhun(index) {
      this.tive = index;
    },
    xuan(shijian, id) {
      if (shijian === "kaishi") {
        this.kaishi = id;
      } else if (shijian === "jieshu") {
        this.jieshu = id;
      }
    },
    xuanshi(data) {
      if (data === "kaishi") {
        this.shijian = "kaishi";
        this.flag = true;
      } else if (data === "jieshu") {
        this.shijian = "jieshu";
        this.flag = true;
      }
    },
    qushi(data) {
      if (data === "quxiao") {
        this.flag = false;
        this.kaishi = "开始时间";
        this.jieshu = "结束时间";
      } else if (data === "queding") {
        this.flag = false;
      }
    },
    wanshan() {
      let obj = {
        jiage: this.yuan,
        renshu: this.yuana,
        canduan: this.active,
        biaozhun: this.tive,
        shijiankai: this.kaishi,
        shijianjie: this.jieshu,
        tianshu: 3,
        zongjin: ""
      }
      if (this.kaishi !== "开始时间" && this.jieshu !== "结束时间") {
        this.$emit("guanbi", obj);
      }
    }
  }
};
</script>

<style scoped>
@import url("../../../../../assets/fonts2/iconfont.css");
.xuanze {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  background: #fff;
}
.shang {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.shang > span {
  margin-left: 10px;
}
.tou {
  width: 100px;
  height: 30px;
  background: rgba(145, 145, 145);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-right: 10px;
}
.zhongjian {
  width: 1px;
  height: 60%;
  background: #fff;
}
.zhong {
  width: 90%;
  height: calc(100% - 40px);
  margin: 0 auto;
}
.zhong > p {
  color: rgba(191, 159, 145);
  font-size: 15px;
  margin: 20px 0 30px 0;
}
.zhongshang {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: rgba(217, 217, 217);
  position: relative;
}
.zhshs {
  height: 100%;
  border-radius: 5px;
  background: blue;
}
.zhsha {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: blue;
  position: absolute;
  top: -5px;
}
.zhsha > p {
  margin-top: -20px;
  margin-left: -13px;
}
.zhongzhong {
  width: 100%;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
}
.zhongzhong li {
  width: 33%;
  height: 30px;
  display: flex;
  align-items: center;
}
.zhongzhong label {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: rgba(217, 217, 217);
  border-radius: 10px;
  margin-right: 5px;
}
.zhongzhong .reds {
  background: blue;
}
.zhongxia {
  width: 100%;
  height: 30px;
  display: flex;
  flex-wrap: wrap;
}
.zhongxia li {
  width: 33%;
  height: 30px;
  display: flex;
  align-items: center;
}
.zhongxia label {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: rgba(217, 217, 217);
  border-radius: 10px;
  margin-right: 5px;
}
.zhongxia .reds {
  background: blue;
}
.zhongshijian {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}
.shijianleft {
  width: 45%;
  height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #000;
}
.shijianright {
  width: 45%;
  height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #000;
}
.zhongshijian div p {
  width: 100px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  line-height: 30px;
}
.jieshu {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
}
.jieshuxia {
  width: 100%;
  height: 300px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.jieshuxiashang {
  width: 100%;
  height: 49px;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jieshuxiashang h1 {
  margin: 0 20px;
  font-size: 20px;
  font-weight: 400;
  color: blue;
}
.jieshuxiaxia {
  width: 100%;
  height: 250px;
}
.jieshuxiaxia li {
  width: 100%;
  height: 35px;
  text-align: center;
  line-height: 35px;
}
.xiaxia {
  background: rgba(255, 244, 229);
}
.wanshan {
  width: 100%;
  height: 130px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wanshan button {
  width: 200px;
  height: 50px;
  background: blue;
  border: none;
  outline: none;
  border-radius: 25px;
}
</style>